<script setup lang="ts">
import { reactive, computed, withDefaults } from 'vue'
import FormFieldRender from './components/FormFieldRender.vue'
/**
 * 配置 数据录入的 类型
 */
export type configType = {
  /* 该 输入框所占的 栅栏数 */
  span: number
  /* Form.item 的 label 值 */
  title: string
  /* Form.item 的 name 值 */
  key: string
  /* Form.item 的 rules 值 */
  rules?: any[]
  /* 录入数据的 提示 */
  placeholder: string
  /* 录入数据的类型 */
  type: any
  /* Select|Cascader 类型的 options 值 */
  options?: any[]
  /* Form.item 的 其它属性 */
  [key: string]: any
  disabled?: boolean
}
export type configsProps = {
  title?: string
  type?: string
  important?: boolean
  noCollapse?: boolean
  noAction?: boolean
  loadings: any
  gutter?: number[]
  layout?: string
  labelCol?: any
  formState: any
  wrapperCol?: any
  styleCollapse?: String // Collapse自定义样式
  btnTxt?: string // 按钮文案
  btnSize?: string
  btnRestTxt?: string
  btnRestShow?: boolean // 重置按钮显示
  size?: string
  list: configType[]
}

interface Emit {
  (e: 'onFinish', params: any): void
}

interface Props {
  configs: configsProps[]
}

const props = withDefaults(defineProps<Props>(), {
  configs: () => [
    {
      title: '',
      type: 'basic',
      important: false,
      noCollapse: false,
      noAction: false,
      gutter: [20, 20],
      formState: {},
      loadings: {
        btnLoading: false,
      },
      layout: 'horizontal',
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      styleCollapse: '', // Collapse自定义样式
      btnTxt: '确定', // 按钮文案
      btnSize: 'small',
      btnRestTxt: '重置',
      btnRestShow: false, // 重置按钮显示
      size: 'small',
      list: [],
    },
  ],
})
const emit = defineEmits<Emit>()

const onFinish = (data: any) => {
  emit('onFinish', {
    formState: data,
  })
}

const activeKey: any = reactive(computed(() => props?.configs.map((item: any) => item.type)))
</script>

<template>
  <div class="formCom-box">
    <template v-if="configs?.length">
      <template v-for="item in configs" :key="item?.key || item?.id">
        <a-collapse v-model:activeKey="activeKey" v-if="!item?.noCollapse">
          <a-collapse-panel :header="item?.title">
            <FormFieldRender
              :data="item"
              :columns="item?.list"
              @onSearchInput="onFinish"
            ></FormFieldRender>
          </a-collapse-panel>
        </a-collapse>
        <template v-else>
          <FormFieldRender :data="item" :columns="item?.list" @onSearchInput="onFinish" />
        </template>
      </template>
    </template>
    <div v-else>渲染表单数据格式错误！</div>
  </div>
</template>
<style lang="less" scoped>
.formCom-box {
  width: 100%;
}
</style>
